<template>
	<div class="printpage">
      <div class=" orderContent">
    
      <h1 class="title">优粮城</h1>
      <!-- 订单信息 -->
      <div>
        <table class="mainInfo">
          <tr >
            <td colspan="2"> 
              <!-- <div> 订单号：6R69719051110597008{{vanOrder.orderNumber}} </div> -->
              <div> 订单号:{{vanOrder.orderNumber}} </div>
              </td>
            
          </tr>
          <tr>
              <td colspan="2">
              <div>时&nbsp;&nbsp;&nbsp;&nbsp;间:{{vanOrder.createAtStr}}</div>
           </td>
          </tr>
          <tr>
            <td>
              <div>业务员:{{staff.name}}</div>
            </td>
            <td class="infoTableRight">
              <div> 电话:{{staff.phoneNo}}  </div>
            </td>
          </tr>
        </table>
        
      </div>
    <!-- 销售明细 -->
    <div v-if="saleItem != null && saleItem.length > 0" class="tableDiv">
      <table  class="table">
        <thead>
          <tr>
            <td>名称</td>
            <td class="numCols">单价</td>
            <td class="numCols">数量</td>
            <td class="numCols">金额</td>
          </tr>
        </thead>
        <tr v-for="(item,index) in saleItem" :key="index">
          <td>{{item.name}}{{item.spec}}</td>
          <td class="numCols">{{item.salePrice}}</td>
          <td class="numCols">X{{item.num}}</td>
          <td class="numCols">{{item.amount}}</td>
        </tr>
      </table>
    </div>
    
    <!-- 赠送明细 -->
    <div v-if="giftItem != null && giftItem.length > 0" class="tableDiv">
       <table  class="table">
        <thead>
          <tr>
            <td>名称</td>
            <td class="numCols">数量</td>
            <td class="saleType">方式</td>
          </tr>
        </thead>
        <tr v-for="(item,index) in giftItem" :key="index" >
          <td>{{item.name}}{{item.spec}}</td>
          <td class="numCols">X{{item.num}}</td>
          <td class="saleType">{{giftGiveTypes[item.saleType]}}</td>
        </tr>
      </table>
    </div>
     <!-- 底部 -->
     <div class="tableDiv">
       <table class="table">
         <tr>
           <td>支付金额(元)： {{vanOrder.amount}}</td>
         </tr>
         
       </table>
       <div class="bottomInfo">
       <span>~ 谢谢惠顾 ~</span>
       </div>
     </div>
     
     </div>
     
	</div>
</template>

<script>
// @ is an alias to /src
import { Stepper } from "vant";
import baseUtil from "@/utils/baseUtil";
import { orderItem } from "@/api/vanProducts";
export default {
  name: "orderPrint",
  components: { [Stepper.name]: Stepper },
  data() {
    return {
      orderNumber: "",
      vanOrder: {},
      staff: {},
      saleItem: [],
      giftItem: [],
      giftGiveTypes: baseUtil.saleType
    };
  },
  methods: {
    //初始化订单明细
    async initOrderInfo() {
      let param = { orderNumber: this.orderNumber };
      let resp = await orderItem(param);
      console.log("initOrderInfo-resp:", resp);
      if (baseUtil.isNotBlankObjs(resp) && baseUtil.isNotBlankObjs(resp.data)) {
        this.giftItem = resp.data.giftItem;
        this.saleItem = resp.data.saleItem;
        this.vanOrder = resp.data.order;
        this.staff = resp.data.staff;
      }
    }
  },
  mounted() {
    this.orderNumber = this.$route.query.orderNumber;
    console.log("===============mounted  orderNumber:", this.orderNumber);
    if (baseUtil.isBlank(this.orderNumber)) return;
    this.initOrderInfo();
  }
};
</script>

<style>
.printpage{
  /* width:100%; */
  height: 100%;
  overflow-y: auto;
}
.title {
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 1rem;
}
.orderContent {
  margin: 0.75rem 0.75rem;
}
.mainInfo {
  width: 100%;
}
.tableDiv {
  border-top: 1px dashed #000;
  padding-top: 1rem;
  margin-top: 1rem;
}
.table {
  width: 100%;
}

.infoTableLeft {
  width: 168px;
}
.infoTableRight {
  text-align: right;
}
.numCols {
  width: 10%;
  text-align: right 10px;
}
.saleType {
  width: 15%;
  text-align: right;
}
.bottomInfo {
  margin-top: 2rem;
  text-align: center;
  padding-bottom: 1rem;
}
</style>
